@charset "utf-8";
/* CSS Document */

html, body{font-family: "arial", sans-serif; margin: 0px; padding: 0px;}

::-webkit-scrollbar {width: 6px; height: 4px; background: #ffffff; }
::-webkit-scrollbar-thumb { background-color: #666; -webkit-border-radius: 1px; }



* {box-sizing: border-box}

/* Set height of body and the document to 100% */
html, body {height: 100%; margin: 0; font-family: Arial;}

/* Style tab links */
.tablink {background-color: #555; color: white; float: left; border: none; outline: none; cursor: pointer; font-size: 26px; width: 100%;}

.tablink:hover {background-color: #777;}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {color: white; display: none; height: 90vh;}

#Home {background-color blue;}
#News {background-color red;}
#Contact {background-color gold;}
#About {background-color green;}



<!-- Vertical dropdown List -->

<!--.dropdown {position: relative; display: inline-block; font-size:20px; font-style:italic; font-family:book antiqua; font-weight:bolder; background-color:rgba(255,215,0,0.8); border-bottom:1px solid #000; border-top:1px solid #000;} -->

.dropdown-content {display: none; height:90vh; font-size:38px; padding-top: 20px;}

.dropdown:hover .dropdown-content{display:block; width:10vw; height:100vh;}

.HR{font-size:16pt; text-align:center; display:inline-block; padding-left:2px; padding-right:2px; width:18vw; vertical-align: text-top;}


/* Style the tab */
.dav {overflow-y: auto; width: 100%; height:90vh; margin-left:0%; margin-right:auto;}

/* Style the buttons inside the tab */
.dav button {background-color: rgba(255,215,0,0.6); float left; outline: none; cursor: pointer; padding: 0px; transition: 0.3s; font-size: 17px; width: 18vw;}

/* Change background color of buttons on hover */
.dav button:hover {background-color: #FFF; color:#000;}

/* Create an active/current tablink class */
.dav button.active {background-color: #ccc;}

p {font-size:28px; font-weight:bold;}